<template>
    <div class="login-wrap">
        <div class="title-main-container">
            <div class="title-main-container-zh">
                xxxxxxxx--管理平台
            </div>
        </div>
        <div class="login-main-container">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="form">
                <el-form-item class="input-div" prop="username">
                    <img alt="" src="../../../assets/img/me.png">
                    <input type="text" id="username" v-model="ruleForm.username" placeholder="请输入用户名">
                </el-form-item>
                <el-form-item class="input-div margin-top-10" prop="password">
                    <img alt="" src="../../../assets/img/mima.png">
                    <input type="password" id="password" v-model="ruleForm.password" placeholder="请输入密码">
                </el-form-item>
                <el-form-item class="input-div margin-top-10" style="text-align: right;" prop="code">
                    <img alt="" src="../../../assets/img/yanzhengma.png">
                    <input type="text" id="verifyCode" name="verifyCode"
                           style="width: 90%; font-size: 100%;text-align: left;" maxlength="4" placeholder="验证码"
                           v-model="ruleForm.code">
                    <img id="validationCode"
                         style="min-height:38px;position:fixed ;cursor: pointer; border: none; width: 120px;border-radius: 4px; margin-top: -40px; margin-left: -120px;"
                         onclick="changeCode()" alt="验证码" src="../../../assets/img/captcha.jpeg">
                </el-form-item>
                <el-button type="button" @click="submitForm('ruleForm')" id="loginBtn" class="login-btn">登录</el-button>
            </el-form>
        </div>
        <div class="foot-div">
            <img alt="" src="src/assets/img/small-logo.png"><span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span><span> 2021 版权所有xxxxx科技有限公司</span>
        </div>
    </div>
</template>

<script>
    // import CR from '../common/cryption'
    // import GLOBAL from '../../../global_variable.js'

    export default {
        data: function () {
            return {
                iconDate: 'el-icon-lock',
                flag: false,
                ruleForm: {
                    username: '',
                    password: '',
                    code: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            submitForm(formName) {
                var flag = false;
                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        flag = true;

                    } else {
                        flag = false;

                    }
                });
                if (flag) {
                    sessionStorage.setItem("ms_username", this.ruleForm.username);
                    this.$router.push('/')
                    var that = this;
                    /*that.$axios({
                            method: "POST",
                            url: GLOBAL.baseURL+"/pethospital/admin/login",
                            data: {
                                adminName: CR.encrypt(that.ruleForm.username),
                                adminPassword: CR.encrypt(that.ruleForm.password)
                            }
                        })
                        .then(res=>{
                            if (res.data.code == 1) {
                                alert(res.data.msg);
                                that.user_name = '';
                                that.user_password = '';
                            } else if (res.data.code == 405) {
                                alert(res.data.msg);
                            } else if (res.data.code == 503) {
                                alert(res.data.msg);
                                that.user_name = '';
                                that.user_password = '';
                            }else if (res.data.code == 0) {
                                var user=res.data.admin;
                                that.Log(user.adminId);
                                // console.log(user);
                                // console.log("账户信息das,", userlist.user_name, userlist.user_password,userlist.user_auth);
                                // localStorage.setItem('ms_username', JSON.stringify(user));
                                sessionStorage.setItem("ms_username",JSON.stringify(user));
                                // console.log(user);
                                that.$router.push("/")

                            }
                        })*/


                } else {
                    // console.log('error submit!!');
                    return false;
                }

            },

            view() {
                var password = document.getElementById('password');
                this.flag = !this.flag;
                if (this.flag) {
                    password.type = "text";
                    this.iconDate = "el-icon-unlock";
                } else {
                    password.type = "password";
                    this.iconDate = "el-icon-lock";
                }
            },
        },
    }
</script>

<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../../../src/assets/img/bg.png);
        background-size: 100%;
    }

    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 24px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }

    .ms-login {
        position: absolute;
        left: 75%;
        top: 60%;
        width: 450px;
        height: 260px;
        margin: -190px 0 0 -190px;
        border-radius: 10px;
        background: rgba(252, 250, 245, 0.5);
        /*background: url(../../assets/img/login-bg.png) ;*/
        overflow: hidden;
    }

    .ms-content {
        padding: 20px 20px;
    }

    /*.login-btn {
        text-align: center;
    }*/

    /*.login-btn {*/
    /*    font-size: 20px;*/
    /*    width: 100%;*/
    /*    height: 40px;*/
    /*    margin-bottom: 10px;*/
    /*    !*background: url(../../assets/img/login-btn.png) no-repeat;*!*/
    /*}*/

    .login-tips {
        font-size: 18px;
        line-height: 30px;
        color: #fff;
    }

    .title-main-container {
        width: 478px;
        height: 37px;
        position: absolute;
        left: 40px;
        top: 30px;
    }

    .title-main-container .title-main-container-zh {
        font-size: 1.4em;
        font-family: SourceHanSansCN-Bold;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
    }

    .title-main-container .title-main-container-en {
        font-size: 0.9em;
        font-family: SourceHanSansCN-Bold;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        text-align-last: justify;
    }

    .foot-div {
        width: 100%;
        position: fixed;
        bottom: 5px;
        text-align: center;
        font-size: 1em;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .foot-div img {
        height: 22px;
    }

    img {
        vertical-align: middle;
    }

    .login-main-container {
        width: 490px;
        height: 430px;
        background: url(/src/assets/img/login-bg.png) no-repeat;
        background-size: 100%, 100%;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        position: absolute;
        margin-left: 50%; /*水平居中*/
        left: -260px;
        top: 50%; /*偏移*/
        transform: translateY(-50%);
    }

    .input-div {
        height: 9.4%;
        min-height: 40px;
        border: 0px;
    }

    .input-div img {
        position: absolute;
        margin-top: 8px;
        margin-left: 10px;
        width: 22px;
        height: 22px;
    }

    .input-div input {
        width: 90%;
        height: 100%;
        min-height: 40px;
        border: 1px solid rgba(221, 221, 221, 1);
        border-radius: 6px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        padding-left: 40px;
    }

    .margin-top-10 {
        margin-top: 10px;
    }

    .input-div {
        height: 9.4%;
        min-height: 40px;
        border: 0px;
    }

    img {
        border: 0;
    }

    .login-btn {
        border: 0px solid;
        width: 80%;
        height: 15%;
        min-height: 60px;
        background: url(../../../assets/img/login-btn.png) no-repeat;
        background-size: 100% 100%;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-top: -5px;
    }

    input, button, select, textarea {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    button, select {
        text-transform: none;
    }

    .login-main-container form {
        width: 73%;
        margin-left: 16%;
        margin-right: 11%;
        margin-top: 20%;
        text-align: center;
    }

    form {
        display: block;
        margin-top: 0em;
    }

    button, select {
        text-transform: none;
    }

    button {
        overflow: visible;
        background-color: Transparent;
        border-style: none;
    }

</style>